<template>
  <div class="recharge">
    <div class="integeralContent">
      <div class="integeralContentBox">
        <div
          class="underline"
        >
          <span class="title1 color1 zIndex fontBold">会员续费</span>
        </div>
        <p class="rechargeTisp font400 color6 content3">
          请选择要续费的会员等级
        </p>
        <div
          class="integeralContentBoxItem"
          v-for="(item,index) in list"
          :key="index"
          @click="checkItem(item,index)"
          :class="acitve == index ? 'bg' : '' "
        >
          <div class="flex justify_between align_center">
            <p :class="acitve == index ? 'color4 content3 fontBold' : 'color2 content3 fontBold' ">
              {{ item.name }}
            </p>
            <p
              :class="acitve == index ? 'color4 content3 font400' : 'color6 content3 font400' "
            >
              {{ item.price }}元
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="fexd_footer">
    <div class="footer_btn flex align_center justify_between">
      <div
        class="font400 content3 color4"
        @click="back"
      >
        <svg
          class="icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-fanhui" />
        </svg>
        <p class="content2 font400 color3">
          返回
        </p>
      </div>
      <div
        @click="submit"
        class="agree font400 content3 color4 ta"
      >
        提交订单
      </div>
    </div>
  </div>
  <!-- 重复订单 -->
  <van-dialog
    v-model:show="orderStatus"
    width="90%"
    title="你有未完成的重复订单"
    confirm-button-text="继续并生成新订单"
    confirm-button-color="#FF7A1F"
    cancel-button-text="取消"
    show-cancel-button
    @confirm="confirm"
  >
    <div class="order">
      <div
        class="orderBox"
        v-for="(item,index) in orderLists.list"
        :key="index"
      >
        <!-- <p class="fontBold color1 content4 title">
          你有未完成的重复订单
        </p>-->
        <div class="orderInfo">
          <div class="orderInfoBox">
            <p class="line20">
              <van-tag
                style="height:19px;width:55px;justify-content: center;"
                class="tagleft"
                color="#FF7A1F"
                type="primary"
                v-if="item.status == 1"
              >
                进行中
              </van-tag>
              <van-tag
                style="height:19px;width:55px;justify-content: center;"
                class="tagleft"
                color="#FF7A1F"
                type="primary"
                v-if="item.status == 2"
              >
                已完成
              </van-tag>
              <van-tag
                style="height:19px;width:55px;justify-content: center;"
                class="tagleft"
                color="#FF7A1F"
                type="primary"
                v-if="item.status == 3"
              >
                已取消
              </van-tag>
              <span class="content3 fontBold color3">{{ item.company_level }}</span>
            </p>
            <p class="moeny flex align_center justify_between">
              <span class="content2 font400 color6">{{ item.create_time }}</span>
              <span class="content3 font400 color1">￥{{ item.price }}</span>
            </p>
          </div>
          <div class="confin flex align_center justify_between">
            <div
              @click="cancle(item.id)"
              class="confinItem cancle font400 content2 color3"
            >
              取消订单
            </div>
            <div
              @click="see"
              class="confinItem see font400 content2 color2"
            >
              查看订单
            </div>
          </div>
        </div>
      </div>
    </div>
  </van-dialog>
</template>

<script setup lang="ts">
import { Toast } from 'vant'
import { getCompanyLevel, orderCancel, orderList, orderCreate } from '@/api'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
const router = useRouter()
const store = useStore()
const acitve:any = ref(0)
const checkList:any = ref([])
const list:any = ref([])
const orderLists: any = ref([])
const orderStatus: any = ref(false)
const getData = async () => {
  list.value = await getCompanyLevel({ is_renew: 1 })
}

const getOrder = async () => {
  orderLists.value = await orderList({ pay_type: 1, type: 1 })
}

getOrder()

getData()

const cancle = async (id:any) => {
  try {
    await orderCancel({ order_id: id })
    getOrder()
    Toast('取消成功')
  } catch (error:any) {
    Toast(error.message)
  }
}

const see = async (id:any) => {
  router.push('/otherServices/order')
}

const back = () => {
  if (store.state.from.path !== '/') {
    router.back()
  } else {
    router.replace('/')
  }
}

const checkItem = (item:any, i:any) => {
  checkList.value = item
  acitve.value = i
}

const submit = () => {
  if (orderLists.value.list.length > 0) {
    orderStatus.value = true
  } else {
    router.push({ path: '/userCenter/order', query: { level_id: list.value[acitve.value].id, pay_type: 1, pay_method: 2, paid_id: 0 } })
  }
}

const confirm = async () => {
  try {
    await orderCreate({ pay_type: 1, company_level: list.value[acitve.value].id, pay_method: 2, paid_id: 0 })
    router.push({ path: '/userCenter/order', query: { level_id: list.value[acitve.value].id, pay_type: 1, pay_method: 2, paid_id: 0 } })
  } catch (error:any) {
    Toast(error.message)
  }
}

</script>

<style lang="less" scoped>
.recharge {
    .underline {
        width: 120px;
    }
    .integeralContent {
        position: relative;
        // top: -40px;
        width: 100%;
        height: 100%;
        background: #f7f7f7;
        border-radius: 20px 20px 0px 0px;
        .integeralContentBox {
            padding: 40px 30px;
            .rechargeNum{
                margin:30px 0 20px;
                border-bottom:1px solid #CACACA;
                padding-bottom:15px;
            }
            .rechargeTisp{
                margin-top: 25px;
                margin-bottom: 20px;
            }
            .integeralContentBoxItem {
                background: #ffffff;
                border-radius: 10px;
                padding:20px 15px;
                margin-bottom: 15px;
            }
            .bg{
                background-color: #FF7A1F;
            }
        }
    }
}
.fexd_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
    .footer_btn {
        padding: 0 30px;
        height: 100%;
        text-align: center;
        .agree {
            width: 189px;
            height: 44px;
            background: #ff7a1f;
            border-radius: 5px;
            text-align: center;
            line-height: 44px;
        }
        .ta{
            width: 242px;
        }
        .icon {
            width: 23px;
            height: 23px;
            margin-bottom: 2px;
        }
    }
}

.order {
  // width: 315px;
  // height: 308px;
  // background: #ffffff;
  // box-shadow: 0px 0px 7px 0px rgba(22, 12, 6, 0.1);
  // border-radius: 10px;
  height:170px;
  overflow: auto;
  .orderBox {
    padding: 15px;
    .title {
      text-align: center;
    }
    .orderInfo {
      // width: 286px;
      background: #f7f7f7;
      border-radius: 5px;
      // margin-top: 20px;
      .orderInfoBox {
        padding: 15px;
        .tagleft {
          margin-right: 5px;
        }
        .moeny {
          margin-top: 20px;
        }
      }
    }
  }
  .confin {
    border-top: 1px solid #cacaca;
    .confinItem {
      width: 50%;
      text-align: center;
      height: 48px;
      line-height: 48px;
      border-right: 1px solid #cacaca;
    }
    .confinItem:last-child {
      border-right: 0;
    }
  }
}

@media (min-width: 750px) {
  .recharge {
    .underline {
        width: 120px;
    }
    .integeralContent {
        position: relative;
        // top: -40px;
        width: 100%;
        height: 100%;
        background: #f7f7f7;
        border-radius: 20px 20px 0px 0px;
        .integeralContentBox {
            padding: 40px 30px;
            .rechargeNum{
                margin:30px 0 20px;
                border-bottom:1px solid #CACACA;
                padding-bottom:15px;
            }
            .rechargeTisp{
                margin-top: 25px;
                margin-bottom: 20px;
            }
            .integeralContentBoxItem {
                background: #ffffff;
                border-radius: 10px;
                padding:20px 15px;
                margin-bottom: 15px;
            }
            .bg{
                background-color: #FF7A1F;
            }
        }
    }
}
.fexd_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
    .footer_btn {
        padding: 0 30px;
        height: 100%;
        text-align: center;
        .agree {
            width: 189px;
            height: 44px;
            background: #ff7a1f;
            border-radius: 5px;
            text-align: center;
            line-height: 44px;
        }
        .ta{
            width: 242px;
        }
        .icon {
            width: 23px;
            height: 23px;
            margin-bottom: 2px;
        }
    }
}

.order {
  // width: 315px;
  // height: 308px;
  // background: #ffffff;
  // box-shadow: 0px 0px 7px 0px rgba(22, 12, 6, 0.1);
  // border-radius: 10px;
  height:170px;
  overflow: auto;
  .orderBox {
    padding: 15px;
    .title {
      text-align: center;
    }
    .orderInfo {
      // width: 286px;
      background: #f7f7f7;
      border-radius: 5px;
      // margin-top: 20px;
      .orderInfoBox {
        padding: 15px;
        .tagleft {
          margin-right: 5px;
        }
        .moeny {
          margin-top: 20px;
        }
      }
    }
  }
  .confin {
    border-top: 1px solid #cacaca;
    .confinItem {
      width: 50%;
      text-align: center;
      height: 48px;
      line-height: 48px;
      border-right: 1px solid #cacaca;
    }
    .confinItem:last-child {
      border-right: 0;
    }
  }
}
}
</style>
